<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@include file="../common/jstl.jsp" %>
<html>
<head>
<title>添加文章</title>
<%@include file="../common/css-js.jsp" %>
	<link rel="stylesheet" href="${path }/static/style/style.css">
	<link rel="stylesheet" type="text/css" href="${path}/static/plug-ins/webuploader/webuploader.css">
	<script type="text/javascript" src="${path}/static/plug-ins/webuploader/webuploader.js"></script>
	<script type="text/javascript" src="${path}/static/plug-ins/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" src="${path}/static/plug-ins/ueditor/ueditor.all.js"></script>
    <script type="text/javascript">
    	//文件上传
		jQuery(function() {
		    var $ = jQuery,
		        uploader,uploaders;
			$('#thumb-imgurl').hide();
		    uploader = WebUploader.create({
				// 选完文件后，是否自动上传。
    			auto: true,
		        // 不压缩image
		        resize: false,
		
		        // swf文件路径
		        swf:  '${path}/static/plug-ins/webuploader/Uploader.swf',
		
		        // 文件接收服务端。
		        server: '${path}/admin/uploadfile/uploadImage',
		
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#picker',
		        duplicate :true  ,
		        // 只允许选择图片文件。
			    accept: {
			        title: 'Images',
			        extensions: 'gif,jpg,jpeg,bmp,png',
			        mimeTypes: 'image/*'
			    }
		    });
		    uploader.on( 'uploadSuccess', function( file,data ) {
		    	if(data.state){
		    		$('#thumb-imgurl').attr('src',data.imgurl);
		    		$('#thumb-imgurl').show();
		    		$('#article-thumb').val(data.imgurl);
		    	}
		    });
		    uploader.on( 'uploadError', function( file,data ) {
		    }); 
		    
		    var imgList = $("#imgList");
		    uploaders = WebUploader.create({
				// 选完文件后，是否自动上传。
    			auto: true,
		        // 不压缩image
		        resize: false,
		
		        // swf文件路径
		        swf:  '${path}/static/plug-ins/webuploader/Uploader.swf',
		
		        // 文件接收服务端。
		        server: '${path}/admin/uploadfile/uploadImage',
		
		        // 选择文件的按钮。可选。
		        // 内部根据当前运行是创建，可能是input元素，也可能是flash.
		        pick: '#pickers',
		        duplicate :true  ,
		        // 只允许选择图片文件。
			    accept: {
			        title: 'Images',
			        extensions: 'gif,jpg,jpeg,bmp,png',
			        mimeTypes: 'image/*'
			    }
		    });
		    uploaders.on( 'uploadSuccess', function( file,data ) {
		    	if(data.state){
		    		imgList.add().append("<div><div class='am-u-sm-8' ><img class='am-img-thumbnail am-radius'  src='"+data.imgurl+"' />"
		    				+"<input  type='hidden' name='images' value='"+data.imgurl+"'  /></div><div class='am-u-sm-4' >"
		    				+"<button  type='button' class='btn' onclick='deleteImg(this);'>删除</button></div></div>");
		    	} 
		    });
		    uploaders.on( 'uploadError', function( file,data ) {
		    });
		});
    	function deleteImg(ob){
    		$(ob).parent().parent().remove();
    	}
    	/* function addBlog(){
    		$.ajax({
				url: "${path}/blog/add",
				data: $('#addBlog').serialize(),
				type: "post",
				dataType: "json",
				beforeSend: function(XMLHttpRequest) {
				},
				success: function(data) {
					if (data.isOk) {
						layer.alert(data.msg,{closeBtn: 0},function(){
							window.location.href = "${path}/blog/myBlog"; 
						});
								
					}else{
						layer.alert(data.msg,{title:"提示",icon: 3});
						if(data.state == 0){
							window.location.href = "${path}"; 
						}else if(data.state == 1){
							return;
						}
					}
				}
			}); 
    	} */
    
    </script> 
</head>
<body>
	<div class="am-container-fluid">
		<div class="admin-content">
			<!-- iframe start -->
			<div class="admin-content-body">
					  <div class="am-cf am-padding">
				        <div class="am-fl am-cf">
				        	<strong class="am-text-primary am-text-lg">首页</strong> / 
				        	<small>添加文章类别</small></div>
				      </div>
					<div class="am-panel am-panel-default">
					  <div class="am-panel-hd"></div>
					  <div class="am-panel-bd">
						<form class="am-form" action="${path }/admin/cmsarticle/add">
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">文章标题：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.title" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">文章类别：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<select name="article.cat_id">
										<c:forEach items="${page.list }" var="cate">
											<option value="${cate.catId }">${cate.catName }</option>
											<c:if test="${not empty cate.childCategory }">
											    <c:forEach items="${cate.childCategory }" var="childCategory">
												<option value="${childCategory.catId }" >&nbsp;&nbsp;&nbsp;&nbsp;${childCategory.catName }</option>
											    </c:forEach>
											</c:if>
										</c:forEach>
						            </select>
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">原作者：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.author" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">摘要：</div>
								<div class="am-u-sm-8 am-u-md-8">
									<textarea rows="3" cols="5" name="article.summary" ></textarea>
								</div>
								<div class="am-hide-sm-only am-u-md-2">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">来源：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.source" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">跳转地址：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.out_url" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">来源地址：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.source_url" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">评论：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input name="article.is_close_comment" value="0"  type="radio"> 允许
						              <input name="article.is_close_comment" value="1"  type="radio"> 不允许
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">显示顺序：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<input type="text" name="article.sort" class="am-input-sm">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">缩略图：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<div id="uploader-demo">
									    <!--用来存放item-->
									    <div id="fileList" class="uploader-list"></div>
									    <div id="picker">选择缩略图</div>
									</div>
			                        <input id="article-thumb" type="hidden" name="article.thumb"  />
			                        <img class="am-img-thumbnail am-radius" alt="" src="" id="thumb-imgurl" style="width: 300px;height: 300px;">
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">轮播图：</div>
								<div class="am-u-sm-8 am-u-md-8">
									<div id="uploader-demo">
									    <!--用来存放item-->
									    <div id="fileList" class="uploader-list"></div>
									    <div id="pickers">选择轮播图</div>
									</div>
			                        <div class="am-u-sm-12" id="imgList">
                 	
                 					</div>
								</div>
								<div class="am-hide-sm-only am-u-md-2">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">文章内容：</div>
								<div class="am-u-sm-8 am-u-md-8">
									<textarea id="article-content" rows="3" cols="5" name="article.content" ></textarea>
									<script type="text/javascript">
				                        var ue = UE.getEditor('article-content');
				                    </script>
								</div>
								<div class="am-hide-sm-only am-u-md-2">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-md-2 am-text-right">文章状态：</div>
								<div class="am-u-sm-8 am-u-md-4">
									<!-- <div class="am-btn-group" data-am-button="">
						                <label class="am-btn am-btn-default am-btn-xs am-active">
						                  <input name="article.state" value="0"  type="radio"> 正常
						                </label>
						                <label class="am-btn am-btn-default am-btn-xs">
						                  <input name="article.state" value="1"  type="radio"> 关闭
						                </label>
						              </div> -->
						              <input name="article.state" value="0"  type="radio"> 正常
						              <input name="article.state" value="1"  type="radio"> 关闭
								</div>
								<div class="am-hide-sm-only am-u-md-6">*</div>
							</div>
							<div class="am-g am-margin-top">
								<div class="am-u-sm-4 am-u-sm-offset-2">
								<button class="am-btn am-btn-primary am-btn-block" type="submit">保存</button></div>
							</div>
						</form>
					  </div>
					</div>
		</div>
	</div>
</div>
</body>
</html>